var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var that = null;

Page({
 /**
 * 页面的初始数据
 */
 data: {
 
 },
 // 画布的触摸移动开始手势响应
 start: function(event) {
  // console.log("触摸开始" + event.changedTouches[0].y)
  // console.log("触摸开始" + event.changedTouches[0].x)
  //获取触摸开始的 x,y
  let point = {
   x: event.changedTouches[0].y,
   y: event.changedTouches[0].x
  }
  touchs.push(point)
 },

 // 画布的触摸移动手势响应
 move: function(e) {
  let point = {
   x: e.touches[0].y,
   y: e.touches[0].x
  }
  touchs.push(point)
  if (touchs.length >= 2) {
   this.draw(touchs)
  }
 },

 // 画布的触摸移动结束手势响应
 end: function(e) {
  // console.log("触摸结束" + e)
  //清空轨迹数组
  for (let i = 0; i < touchs.length; i++) {
   touchs.pop()
  }

 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
  that = this
  //获得Canvas的上下文
  content = wx.createCanvasContext('firstCanvas')
  //设置线的颜色
  content.setStrokeStyle("#000")
  //设置线的宽度
  content.setLineWidth(5)
  //设置线两端端点样式更加圆润
  content.setLineCap('round')
  //设置两条线连接处更加圆润
  content.setLineJoin('round')
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function() {

  // 获取画布尺寸
  var query = wx.createSelectorQuery()
  query.select('#canvas').boundingClientRect()
  query.exec(function(res) {
   canvasw = res[0].width;
   canvash = res[0].height
  })
 },

 //绘制
 draw: function(touchs) {
  let point1 = touchs[0]
  let point2 = touchs[1]
  touchs.shift()
  content.moveTo(point1.y, point1.x)
  content.lineTo(point2.y, point2.x)
  content.stroke()
  content.draw(true)
 },
 //清除操作
 clearClick: function() {
  //清除画布
  content.clearRect(0, 0, canvasw, canvash)
  content.draw(true)
 },
 //保存图片
 saveClick: function() {
  var that = this
  wx.canvasToTempFilePath({
   canvasId: 'firstCanvas',
   success: function(res) {
    //打印图片路径
    var path = res.tempFilePath
    //上传图片
    that.uploadSignPic(path)
    console.log(path)


   }
  })
 },


 /**
 * 上传签名图片
 */
 uploadSignPic: function(path) {
   //具体实现的业务逻辑
 }

})